<template>
	<view class="container">
		<!--banner-->
		<view class="tui-banner-box">
			<swiper
				:indicator-dots="true"
				:autoplay="true"
				:interval="5000"
				:duration="150"
				class="tui-banner-swiper"
				:circular="true"
				previous-margin="60rpx"
				next-margin="60rpx"
				@change="change"
			>
				<swiper-item v-for="(item, index) in banner" :key="index" class="tui-banner-item">
					<image
						:src="$cdn.photo + item"
						class="tui-slide-image"
						:class="[current != index ? 'tui-banner-scale' : '']"
						:data-src="$cdn.photo + item"
						mode="scaleToFill"
						@tap="previewImage"
					/>
				</swiper-item>
			</swiper>
		</view>
		<!--banner-->
		<!-- tag -->
		<view class="title">{{ memberBase.userName }}</view>
		<view class="flex-box">
			<tui-tag :plain="true" shape="circle">{{ memberBase.cityName }}</tui-tag>
			<tui-tag :plain="true" shape="circle">{{ memberBase.age }}岁</tui-tag>
			<tui-tag :plain="true" shape="circle">{{ memberBase.sex==1?'男':'女' }}</tui-tag>
			<tui-tag :plain="true" shape="circle">{{ memberBase.postJob }}</tui-tag>
			<tui-tag v-show="memberBase.faceScore" :plain="true" shape="circle">颜值{{ memberBase.faceScore }}分</tui-tag>
			<!-- <tui-tag shape="circle">颜值89</tui-tag>
			<tui-tag shape="circle">等级 Lv32</tui-tag>
			<tui-tag shape="circle">贡献值 99</tui-tag> -->
		</view>
		<!-- tag -->
		<view class="title">TA的动态</view>
		<view class="flex-box">
			<button @tap="toPlazaList" class="tui-btn tui-btn-small-cus tui-green tui-fillet" 
			hover-class="tui-warning-hover">查看TA的动态</button>
<!-- 			<button @tap="toPlazaList" class="tui-btn tui-btn-small-cus tui-warning tui-fillet"
			hover-class="tui-warning-hover">TA的聚会</button>
			<button @tap="toPlazaList" class="tui-btn tui-btn-small-cus tui-primary tui-fillet"
			hover-class="tui-warning-hover">TA的社群</button> -->
		</view>
		<view class="title">个性签名</view>
		<view class="sign">
			<text>{{ memberBase.sign }}</text>
		</view>
		
		<!-- bottom tar -->
		<view class="tui-operation">
			<view class="tui-operation-left tui-col-7 tui-height-full tui-ptop-zero">
				<!-- <view class="tui-btn-comment" @tap="btnCmt">发表你的评论...</view> -->
				<button class="tui-btm" type="warn" @tap="memberCall">打招呼</button>
				<button shape="circle" @tap="focusMemberOrUn" :type="memberBase.isFocusTa ? 'primary' : 'default'" 
				class="tui-btm-small">
					{{ memberBase.isFocusTa ? '已喜欢' : '喜欢' }}
				</button>
			</view>
			<!-- 只有已打招呼通过的，才能发消息，只有别人打了招呼，你才能跟别人聊天 -->
			<view class="tui-operation-right tui-right-flex tui-col-5">
				<view class="tui-operation-item" @tap="collectMemberOrUn" hover-class="opcity" :hover-stay-time="150">
					<tui-icon :name="memberBase.isCollectTa ? 'star-fill' : 'star'" :size="29" :color="memberBase.isCollectTa ? '#5677fc' : '#444'"></tui-icon>
				</view>
				<view class="tui-operation-item" hover-class="opcity" :hover-stay-time="150">
					<button open-type="share" class="tui-share-btn"><tui-icon name="share" :size="31" color="#444"></tui-icon></button>
				</view>
			</view>
		</view>
		<!-- bottom tar -->
	</view>
</template>

<script>
import tuiIcon from '@/components/icon/icon';
import tuiButton from '@/components/button/button';
import tuiTag from '@/components/tag/tag';
export default {
	components: {
		tuiIcon,
		tuiButton,
		tuiTag
	},
	onLoad: function(e) {
		if (e.memberId) {
			this.memberId = e.memberId;
			this.getMemberDetail(this.memberId);
		}
		if(e.userName){
			uni.setNavigationBarTitle({
				title: e.userName + '-主页'
			});
		}
	},
	created() {
		// console.log(this.memberId);
	},
	data() {
		return {
			banner: [],
			isCollection: false,
			current: 0,
			memberId: '',
			memberBase: {},
			$cdn:this.$cdn
		};
	},
	methods: {
		// 调TA的动态页面
		toPlazaList(){
			uni.navigateTo({
				url:'../plaza/member-plaza-list?memberId='+this.memberId+ '&userName=' + this.memberBase.userName
			})
		},
		// 收藏
		collectMemberOrUn() {
			if (this.memberBase.isCollectTa == null || this.memberBase.isCollectTa == 0) {
				// 收藏
				let postData = { memberId: this.memberId };
				this.tui
					.request('/auth/api/member/collectMember', postData, 'POST', false, true)
					.then(res => {
						if (res.code == 0) {
							this.tui.toast('收藏成功');
							this.memberBase.isCollectTa = 1;
						} else {
							this.tui.toast('失败，' + res.msg);
						}
					})
					.catch(res => {
						console.log(res);
					});
			} else {
				// 取消收藏
				let postData = { memberId: this.memberId };
				this.tui
					.request('/auth/api/member/unCollectMember', postData, 'POST', false, true)
					.then(res => {
						if (res.code == 0) {
							this.tui.toast('取消成功');
							this.memberBase.isCollectTa = 0;
						} else {
							this.tui.toast('失败，' + res.msg);
						}
					})
					.catch(res => {
						console.log(res);
					});
			}
		},
		// 关注
		focusMemberOrUn() {
			if (this.memberBase.isFocusTa == null || this.memberBase.isFocusTa == 0) {
				// 关注喜欢
				let postData = { memberId: this.memberId };
				this.tui
					.request('/auth/api/member/focusMember', postData, 'POST', false, true)
					.then(res => {
						if (res.code == 0) {
							this.tui.toast('成功，对方可看到你的青睐哦~');
							this.memberBase.isFocusTa = 1;
						} else {
							this.tui.toast('失败，' + res.msg);
						}
					})
					.catch(res => {
						console.log(res);
					});
			} else {
				// 取消喜欢
				let postData = { memberId: this.memberId };
				this.tui
					.request('/auth/api/member/unFocusMember', postData, 'POST', false, true)
					.then(res => {
						if (res.code == 0) {
							this.tui.toast('操作成功');
							this.memberBase.isFocusTa = 0;
						} else {
							this.tui.toast('失败，' + res.msg);
						}
					})
					.catch(res => {
						console.log(res);
					});
			}
		},
		// 打招呼
		memberCall() {
			/* let postData = { memberIdTo: this.memberId };
			this.tui
				.request('/auth/api/messageCall/insert', postData, 'POST', false, true)
				.then(res => {
					if (res.code == 0) {
						this.tui.toast('打招呼成功，请等待对方回应');
					} else {
						this.tui.toast('失败，' + res.msg);
					}
				})
				.catch(res => {
					console.log(JSON.stringify(res));
				}); */
				uni.navigateTo({
					url: '../msg/chat?memberIdTo='+this.memberId+'&userName='+this.memberBase.userName
				});
		},
		previewImage: function(e) {
			console.log(e.target.dataset.src);
			var current = e.target.dataset.src;
			let newImageList = [];
			for (var i = 0; i < this.banner.length; i++) {
				newImageList[i] = this.$cdn.photo + this.banner[i];
			}
			uni.previewImage({
				current: current,
				urls: newImageList,
				indicator: 'default'
			});
		},
		getMemberDetail(memberId) {
			let postData = { memberId: memberId };
			this.tui
				.request('/api/member/getMember.short', postData, 'GET', false, false)
				.then(res => {
					if (res.code == 0) {
						console.log('getMember=' + JSON.stringify(res));
						this.memberBase = res.data;
						uni.setNavigationBarTitle({
							title: this.memberBase.userName + '-主页'
						});
						if (this.memberBase.photos != null && this.memberBase.photos != '') {
							this.banner = res.data.photos.split(',');
						}
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		change: function(e) {
			this.current = e.detail.current;
		}
	}
};
</script>

<style>
@import '../../static/style/thorui.css';
.container {
	/* padding-bottom: 100rpx; */
	box-sizing: border-box;
}

/*banner*/

.tui-banner-box {
	width: 100%;
	padding-top: 20rpx;
	box-sizing: border-box;
	background: #fff;
}

.tui-banner-swiper {
	width: 100%;
	height: 600rpx;
}

.tui-banner-item {
	padding: 0 16rpx;
	box-sizing: border-box;
}

.tui-slide-image {
	width: 100%;
	height: 600rpx;
	display: block;
	border-radius: 12rpx;
	/* transition: all 0.1s linear; */
}

.tui-banner-scale {
	transform: scaleY(0.9);
	transform-origin: center center;
}

/* #ifdef APP-PLUS || MP */
.tui-banner-swiper .wx-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

.tui-banner-swiper .wx-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 16rpx;
	overflow: hidden;
}

.tui-banner-swiper .wx-swiper-dot-active::before {
	background: #fff;
}

.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
	width: 16rpx;
}

/* #endif */

/* #ifdef H5 */
>>> .tui-banner-swiper .uni-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

>>> .tui-banner-swiper .uni-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 16rpx;
	overflow: hidden;
}

>>> .tui-banner-swiper .uni-swiper-dot-active::before {
	background: #fff;
}

>>> .tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
	width: 16rpx;
}

/* #endif */
/*banner*/

/* bottom bar */
.tui-operation {
	width: 100%;
	height: 120rpx;
	overflow: hidden;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 99999;
	/* padding-bottom: env(safe-area-inset-bottom); */
	padding-bottom: 10rpx;
}

.tui-safearea-bottom {
	width: 100%;
	height: env(safe-area-inset-bottom);
}

.tui-operation::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	border-top: 1rpx solid #eaeef1;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
}

.tui-operation-left {
	display: flex;
	align-items: center;
}

.tui-operation-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
}

.tui-operation-right {
	height: 100rpx;
	box-sizing: border-box;
	padding-top: 0;
}

.tui-badge-class {
	color: #5677fc !important;
	position: absolute;
	top: -6rpx;
	padding: 2px 4px !important;
	/* #ifdef H5 */
	transform: translateX(50%) scale(0.8);
	/* #endif */
}

.tui-right-flex {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tui-btn-comment {
	height: 64rpx;
	width: 84%;
	background: #ededed;
	color: #999;
	border-radius: 8rpx;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	padding-left: 20rpx;
	box-sizing: border-box;
	padding-top: 0;
	margin-left: 30rpx;
}

.tui-col-7 {
	width: 58.33333333%;
}

.tui-col-5 {
	width: 41.66666667%;
}

.tui-share-btn {
	display: block;
	background: none;
	margin: 0 60rpx 0 0;
	padding: 0;
}

.tui-default {
	padding: 20upx 30upx;
}
.publish-content {
	margin-top: 10rpx !important;
}


	.tui-btm {
		height: 70rpx;
		margin: 20rpx 20rpx 20rpx 30rpx;
		width: 50%;
		font-size: 34rpx;
		line-height: 70rpx;
		border-radius:20rpx !important;
	}
	.tui-btm-small {
		height: 70rpx;
		margin: 20rpx 20rpx 20rpx 30rpx;
		width: 50%;
		font-size: 30rpx;
		line-height: 70rpx;
	}
/* bottom bar */

/* tag */
.title {
	padding: 24rpx 40rpx;
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}
.tui-tag,
.tui-tag-small,
.tui-mrbtm {
	margin-bottom: 26upx;
	margin-right: 20upx;
}
.flex-box {
	width: 100%;
	display: flex;
	padding: 0 30rpx;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	/* margin-bottom: 10rpx; */
}
.sign {
	margin: 0 40rpx;
	font-size: 32rpx;
	margin-bottom: 140rpx;
}
/* tag */
.tui-btn-small-cus {
	width: 280rpx !important;
	font-size: 30rpx;
	height: 60rpx;
	line-height: 60rpx;
	margin:0rpx 14rpx;
	padding: 0rpx 0rpx;
}
</style>
